<!--
 * @Author: yan_hai_dong 891236760@qq.com
 * @Date: 2022-10-17 13:26:43
 * @LastEditors: yan_hai_dong 891236760@qq.com
 * @LastEditTime: 2022-10-18 11:33:26
 * @FilePath: \app\src\components\MyCollapse\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div style="margin: 16px">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>自适应铺满collapse</span>
      </div>

      <el-collapse accordion v-model="active" class="my_colp">
        <MyElCollapseItem>
          <template slot="title">
            一致性 Consistency<i class="header-icon el-icon-info"></i>
          </template>
          <div>
            与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
          </div>
          <div>
            在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
          </div>
          <div>
            与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
          </div>
        </MyElCollapseItem>
        <MyElCollapseItem title="反馈 Feedback">
          <div>
            控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
          </div>
          <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
        </MyElCollapseItem>
      </el-collapse>
    </el-card>
  </div>
</template>

<script>
import MyElCollapseItem from "./MyElCollapseItem";
export default {
  components: { MyElCollapseItem },
  data() {
    return {
      active: "",
    };
  },
};
</script>

<style lang="less">
.my_colp {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 500px;
  box-sizing: border-box;
}
</style>